<template>
  <div>
      <el-form-item label="条件事件">
         <el-input v-model="bpmnFormData.conditionValue" placeholder="请输入条件" @change="updateElementEvent"/>
      </el-form-item>
    <el-form-item label="变量名称">
      <el-input v-model="bpmnFormData.variableName" placeholder="请输入变量名称" @change="updateElementEvent"/>
    </el-form-item>
    <el-form-item label="操作类型">
      <el-select v-model="bpmnFormData.variableEvent" @change="updateElementEvent" multiple placeholder="请选择操作类型" style="width: 280px">
        <el-option
          v-for="item in variableEventType"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
import {StrUtil} from '@/utils/StrUtil';
import {checkEventType, uuid} from "@/components/Process/common/bpmnUtils";

export default {
  name: "ConditionEventPanel",
  /** 组件传值  */
  props : {
    id: {
      type: String,
      required: true
    },
  },
  data() {
    return {
      bpmnFormData: {
        conditionValue: '',
        variableName: '',
        variableEvent: [],
        eventDefinitions: []
      },
      variableEventType: [
        {value: 'create',label: 'create',},
        {value: 'update',label: 'update',},
        {value: 'delete',label: 'delete',},
      ]
    }
  },
  /** 传值监听 */
  watch: {
    id: {
      handler(newVal) {
        if (StrUtil.isNotBlank(newVal)) {
          this.resetTaskForm();
        }
      },
      immediate: true, // 立即生效
    },
  },
  methods: {
    resetTaskForm() {
      this.bpmnFormData = {
        conditionValue: '',
        variableName: '',
        variableEvent: [],
        eventDefinitions:[]
      };
      this.bpmnFormData.$type = this.modelerStore.element?.businessObject?.$type;
      // 处理事件
      if (checkEventType(this.bpmnFormData.$type)) {
        this.getFlowEvent(this.bpmnFormData,this.modelerStore.element.businessObject)
      }
    },
    // 处理事件
    getFlowEvent(bpmnFormData, businessObject) {
      if (businessObject.eventDefinitions && businessObject.eventDefinitions.length > 0) {
        if (businessObject.eventDefinitions[0].$type.indexOf("Condition") !== -1) {
          bpmnFormData.conditionValue = businessObject.eventDefinitions[0]['condition'].body;
          bpmnFormData.variableName = businessObject.eventDefinitions[0].variableName;
          const variableEvent = businessObject.eventDefinitions[0].variableEvent;
          bpmnFormData.variableEvent = variableEvent? variableEvent.split(',') : [];
        }
      }
    },

    // 更新条件事件
    updateElementEvent() {
      const conditionValue = this.bpmnFormData.conditionValue || null;
      if (conditionValue) {
        let taskAttr = Object.create(null);
        taskAttr.variableName = this.bpmnFormData.variableName || null;
        taskAttr.variableEvent = this.bpmnFormData.variableEvent?.join(',') || null;

        const conditionExpression = this.modelerStore.moddle.create("bpmn:FormalExpression", {
          body: conditionValue
        });

        const conditionEventAttrs = {
          id: `ConditionalEventDefinition_${uuid(8)}`,
          condition: conditionExpression,
        };

        if (taskAttr.variableName) {
          conditionEventAttrs.variableName = taskAttr.variableName;
        }
        if (taskAttr.variableEvent) {
          conditionEventAttrs.variableEvent = taskAttr.variableEvent;
        }

        const conditionEventDefinition = this.modelerStore.moddle.create("bpmn:ConditionalEventDefinition", conditionEventAttrs);
        this.modelerStore.element.businessObject.eventDefinitions = [conditionEventDefinition];
      } else {
        this.bpmnFormData.variableName = null;
        this.bpmnFormData.variableEvent = [];
        this.modelerStore.element.businessObject.eventDefinitions =
          this.modelerStore.element.businessObject.eventDefinitions.filter(ex => ex.$type !== 'bpmn:ConditionalEventDefinition');
      }
    },
  }
}
</script>
